import React from "react";
import "./style.css";
import { Button, Form, Input, message as antdMessage } from "antd";
import axios from "axios";
import { useNavigate } from "react-router-dom";
const Login = () => {
  const navigate = useNavigate()
  const onFinish = async (values) => {
    // console.log(values)
    // 请求后端
    const resp = await axios.post("/api/login", values);
    const { code, message, data } = resp.data;
    if(code === 200) {
      antdMessage.success(message)
      // 存储信息
      localStorage.setItem('userInfo', JSON.stringify(data.userInfo))
      localStorage.setItem('token', (data.token))
      // 进入首页
      navigate('/home')
    } else {
      antdMessage.error(message)
    }
  };
  return (
    <div className="login">
      <div className="content">
        <h3 style={{ textAlign: "center" }}>用户登陆</h3>
        <Form onFinish={onFinish}>
          <Form.Item label="账号" name="username">
            <Input></Input>
          </Form.Item>
          <Form.Item label="密码" name="password">
            <Input></Input>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 2 }}>
            <Button type="primary" htmlType="submit">
              登陆
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;
